<template>
  <div style="width: 100%; height: 100%; margin-bottom: 10px">
    <el-dropdown>
      <el-button type="primary">
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-row>
      <el-button type="primary" @click="GetLogSet()"
        >获取服务端日志配置文件</el-button
      >
      <el-button type="warning" @click="SaveLogSet()"
        >保存服务端日志配置文件</el-button
      >
    </el-row>
    <el-row style="margin-top: 15px">
      <table border="1">
        <colgroup>
          <col style="width: 16rem; max-width: 16rem" />
          <col style="width: 32rem" />
          <col style="width: 16rem; max-width: 16rem" />
          <col style="width: 32rem" />
        </colgroup>
        <tbody>
          <tr>
            <td class="title">开启HTTP日志</td>
            <td align="center">
              <el-switch
                v-model="FLogSet.logHTTP"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </td>
            <td class="title">开启SQL日志</td>
            <td align="center">
              <el-switch
                v-model="FLogSet.logSQL"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </td>
          </tr>
          <tr>
            <td class="title">日志写到数据库</td>
            <td align="center">
              <el-switch
                v-model="FLogSet.logToDB"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              >
              </el-switch>
            </td>
            <td class="title">日记数据库代码</td>
            <td colspan="5">
              <el-input v-model="FLogSet.logDBCode"></el-input>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
    <div style="height: 25px"></div>
    <el-row>
      <el-col :span="8">
        <el-button type="primary" @click="GetLogList(0)">查看SQL日记</el-button>
        <el-button type="primary" @click="GetLogList(-1)">上一页</el-button>
        <el-button type="primary" @click="GetLogList(1)">下一页</el-button>
      </el-col>
      <el-col :span="3">
        <el-row>
          <el-col :span="12">
            <el-button type="text" align="center"
              >当前第{{ iPageIndex }}页</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-input placeholder="每页条数" v-model="iPageSize"></el-input>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 数据配置列表 -->
    <el-row style="margin-top: 5px; height: 400px">
      <el-table
        :data="FLogList"
        height="100%"
        style="width: 100%; overflow-y: auto"
      >
        <el-table-column prop="fLogType" label="日记类型" width="180" fie>
        </el-table-column>
        <el-table-column prop="fLogLeve" label="日记级别" width="180">
        </el-table-column>
        <el-table-column prop="fCreateTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="LogEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-input
        type="textarea"
        :rows="10"
        placeholder="日记信息"
        v-model="FIndexLog.fLogMsg"
      >
      </el-input>
    </el-row>
  </div>
</template>

<script>
import StrHelp from "@/basesuper/jshelp/stringHelp.js";
import elmHelper from "@/basesuper/jshelp/elmHelp.js";
import constHelper from "@/basesuper/jshelp/constHelp.js";
import { TLogSet } from "@/basesuper/model/modelModule.js";
export default {
  watch: {},
  data() {
    return {
      FOpenData: false,
      FLogSet: {},
      FLogList: [],
      FIndexLog: {},
      iPageIndex: 1,
      iPageSize: 50,
    };
  },
  created: function () {},
  mounted: function () {
    this.initLayOut();
  },
  methods: {
    initLayOut: function () {},
    GetLogSet: function () {
      var that = this;
      var lRequest = this.$HttpHelp.httpRequest();
      lRequest.url = constHelper.apiBaseUrl + "fastService/Log/GetLogSet";
      lRequest.onSuccess = function (response) {
        //成功执行事件
        that.FLogSet = response.resultData;
        that.FOpenData = true;
        that.$message("获取服务端日志配置成功");
      };
      lRequest.onFailed = function (response) {
        //失败执行事件
        that.$alert(JSON.stringify(response));
      };
      lRequest.onError = function (error) {
        //异常事件
        that.$alert(JSON.stringify(error));
      };
      //请求
      lRequest.get();
    },
    SaveLogSet: function () {
      if (!this.FOpenData) {
        this.$alert("请先获取服务端日志配置,方可操作");
        return;
      }
      var that = this;
      var lRequest = this.$HttpHelp.httpRequest();
      lRequest.url = constHelper.apiBaseUrl + "fastService/Log/SaveLogSet";
      lRequest.data = this.FLogSet;
      lRequest.onSuccess = function (response) {
        //成功执行事件
        that.$message("保存服务器日志配置成功");
      };
      lRequest.onFailed = function (response) {
        //失败执行事件
        that.$alert(JSON.stringify(response));
      };
      lRequest.onError = function (error) {
        //异常事件
        that.$alert(JSON.stringify(error));
      };
      //请求
      lRequest.post();
    },
    GetLogList: function (iStep) {
      this.iPageIndex = this.iPageIndex + iStep;
      if (this.iPageIndex <= 0) {
        this.iPageIndex = 1;
      }
      var that = this;
      var lRequest = this.$HttpHelp.httpRequest();
      lRequest.url = constHelper.apiBaseUrl + "fastService/Log/GetLogList";
      (lRequest.data =
        "iPageIndex=" + this.iPageIndex + "&iPageSize=" + this.iPageSize),
        (lRequest.onSuccess = function (response) {
          //成功执行事件
          that.FLogList = response.resultData;
          that.$message("获取日志成功");
        });
      lRequest.onFailed = function (response) {
        //失败执行事件
        that.$alert(JSON.stringify(response));
      };
      lRequest.onError = function (error) {
        //异常事件
        that.$alert(JSON.stringify(error));
      };
      //请求
      lRequest.postForm();
    },
    LogEdit: function (qIndex, qRow) {
      this.FIndexLog = this.FLogList[qIndex];
    },
  },
};
</script>
<style>
table {
  border-collapse: collapse;
}

table,
table tr td {
  border: 1px solid #ccc;
}

.title {
  background-color: #d9d9d9;
  padding-left: 10px;
}
</style>
